<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布博客</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blogEdit.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <script src="js/common.js"></script>
    <script src="js/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css"/>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

    <style>
        .layui-row {
            width: 100%;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div class="nav">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md7">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="images/logo.png" alt="">
                    <span>博客系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="myblog.html">
                    <img src="images/myblog.png" alt="">
                    <span id="user">我的博客</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="https://markdown.com.cn/basic-syntax/">
                    <img src="images/editor.png" alt="">
                    <span>MarkDown</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html">
                    <img src="images/collect.png" alt="">
                    <span>博客列表</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogPublish.html">
                    <img src="images/write.png" alt="">
                    <span>发布博客</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="javascript:logout()">
                    <img src="images/logout.png" alt="">
                    <span>退出登录</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!--编辑器容器-->
<div class="edit-container">
    <form onsubmit="return false;" style="height: 100%">
        <div class="title">
            <input type="text" id="title" name="title" placeholder=" 请输入文章标题">
            <input id="submit" type="submit" value="发布博客">
        </div>

        <div id="editor">
            <textarea name="content" id="content" style="display: none"></textarea>
        </div>
    </form>
</div>

<script>
    var editor = editormd("editor", {
        // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
        width: "100%",
        // 设定编辑器高度
        height: "calc(100% - 50px)",
        // 编辑器中的初始内容
        markdown: "# 在这里写下一篇博客",
        // 指定 editor.md 依赖的插件路径
        path: "editor.md/lib/",
        saveHTMLToTextarea: true
    });
    let sub = document.querySelector('#submit');
    sub.onclick = function () {
        if (confirm("确认提交?")) {
            // 非空校验 ->标题&正文
            let title = document.querySelector('#title');
            if (title.value === '') {
                alert('标题不能为空!');
                title.focus();
                return;
            }
            if (editor.getValue().length < 10) {
                alert('正文不能低于10字');
                return;
            }
            $.ajax({
                type: 'post',
                url: '/art/add',
                data:{
                    "title":title.value,
                    "content":editor.getValue()
                },
                success:function(body){
                    if(body && body.code === 200){
                        location.assign("/myblog.html");
                    }else{
                        alert("抱歉，文章发布失败，请重试！");
                    }
                }
            })
        }
    }

</script>
</body>
</html>